import React, {JSX, useState} from "react";
import {Image, Text, View} from "@tarojs/components";
import './index.scss';

interface detailItem {
  text: string,
  icon: string,
}

const details: Array<detailItem> = [
  {
    text: '免费WIFI',
    // eslint-disable-next-line import/no-commonjs
    icon: require('@/static/images/index/Detail/WIFI.png')
  },
  {
    text: '免费停车场',
    // eslint-disable-next-line import/no-commonjs
    icon: require('@/static/images/index/Detail/ting_che_chang.png')
  },
  {
    text: '电竞级电脑配置',
    // eslint-disable-next-line import/no-commonjs
    icon: require('@/static/images/index/Detail/dian_nao_pei_zhi.png')
  },
  {
    text: '大厅投影观赛区',
    // eslint-disable-next-line import/no-commonjs
    icon: require('@/static/images/index/Detail/dian_nao_pei_zhi.png')
  },
]

const Card: React.FC = (): JSX.Element => {
  const [detailList] = useState(details);
  return (
    <View className='Card main-card'>
      <View className='justify-between'>
        <View className='title'>和悦住PMS</View>
        <View className='phone align-center'>
          <Text>联系电话</Text>
          <Image lazyLoad src={require('@/static/images/index/DetailList/phone.png')}></Image>
        </View>
      </View>
      <View className='Detail flex-wrap'>
        {detailList.map(item => (
          <View key={item.text} className='item align-center'>
            <Image lazyLoad src={item.icon}></Image>
            <Text className='text'>{item.text}</Text>
          </View>
        ))}
      </View>
      <View className='Address'>
        <View className='ding_wei align-center'>
          <Image lazyLoad src={require('@/static/images/index/Detail/ding_wei.png')}></Image>
          <Text className='text'>合肥市蜀山区丹霞路交汇处东50米</Text>
        </View>
        <View className='justify-end di_tu'>
          <Image lazyLoad src={require('@/static/images/index/DetailList/di_tu.png')}></Image>
        </View>
      </View>
    </View>
  )
}

export default Card;


